<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.active{
				background-color: darkcyan;
			}
			li{
				list-style: none;
				padding: 10px;
				width: 300px;
				height: 36px;
				text-align: center;
				border: 1px solid silver;
				border-radius: 5px;
			}
			div{
				height: 220px;
			}
			
			input{
				margin: 20px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div>
				<li v-for="item in cutinfo">
					姓名{{item.a}},年龄:{{item.age}}
				</li>
			</div>
			<input v-for=" (num,index) in howmany" :class="{'active':active==index}" type="button" @click="chosePage(index)" :value="num "/>
			
		</div>
		<script type="text/javascript" src="vue.min_02.js"></script>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					info:[
						{name:'a',age:1},
						{name:'b',age:2},
						{name:'c',age:3},
						{name:'d',age:4},
						{name:'e',age:5},
						{name:'f',age:6},
						{name:'g',age:7},
						{name:'h',age:8},
						{name:'i',age:9},
						{name:'j',age:10},
						{name:'k',age:11},
						{name:'l',age:12},
						{name:'m',age:13}
					],
					cutinfo:[],
					sum:3,
					active:''
				},
				mounted:function(){
					this.chosePage(0)
				},
				computed:{
					howmany(){
						return this.info.length%this.sum==0?this.info.length/this.sum:parseInt(this.info.length/this.sum)+1
					}
				},
				methods:{
					chosePage(n){
						this.cutinfo=this.info.slice(n*this.sum,n*this.sum+this.sum );
						this.active=n;
					}
				}
			})
		</script>
	</body>
</html>
